<template>
    <div style="display: inline-block;">
        <div id="container" style="text-align: center;">
            <!--<button id="select-files" class="layui-btn"><i class="icon icon-file-o"></i> 上传头像</button>-->
            <button id="select-files"><i class="el-icon-upload2"></i> 选择文件</button>
            <button id="post-files" class="layui-btn layui-btn-normal"><i class="icon icon-upload"></i> 开始上传</button>
            <span id="oss-file" style="">你的浏览器不支持flash,Silverlight或者HTML5！</span>
        </div>
        <!--<div style="display: none;">-->
            <!--<hr style="margin-top: 10px;margin-bottom: 10px;">-->
            <!--<p class="text-primary">您所选择的文件：</p>-->
            <!--<div id="oss-file"style="min-height: 100px;overflow-y: scroll;max-height: 100px;">你的浏览器不支持flash,Silverlight或者HTML5！</div>-->
            <!--<span id="console" class="text-danger" style="color:red;"></span>-->
        <!--</div>-->
    </div>
</template>

<script>
    export default {
        data(){
            return {
                imgUrl: '',
            }
        },
        methods: {
            // 图片上传
            imgUpload() {
                uploadFile({
                    // file_length: 1,
                    multi_selection: false, // 是否允许多文件上传
                    filters: {
                        mime_types: [ // 允许上传的文件格式
                            {title: 'Image files', extensions: '*'},
                            // {title: "Zip files", extensions: "zip,rar,7z"}
                        ],
                        max_file_size: '10mb', // 限制文件大小
                        prevent_duplicates: false // 不允许选取重复文件
                    }
                }, (up, file, info) => {
                    // this.imgUrl = 'https://dlhz.oss-cn-beijing.aliyuncs.com/' + file.rename;
                    // ?x-oss-process=image/resize,w_60,h_60
                    // console.log(this.imgUrl, '成功啦~~~')
                    this.$emit('upload', file.rename);
                }, ()=>{
                  this.$emit('uploadReady', '');
                });
            }
        },
        mounted(){
            this.imgUpload();
        }
    }
</script>
